<template>
<div class="root">
   <div class="example-basic">
      <el-time-picker v-model="value1" placeholder="起止时间" class="custom-time-picker"/>
      <el-time-picker
        v-model="value2"
        placeholder="截止时间"
        class="custom-time-picker"
      />
    </div>
</div>
   
  </template>
  
  <script>
export default {
    data() {
        return {
            value1: null,
            value2: null
        };
    }
};
</script >
  
  <style scoped>
  .root{
    /* border: red 1px solid; */
    /* display: flex; */
   /* flex-direction: row; */
   width: 120px;
   margin-top: -450px;
   margin-left: 280px;
  }
  ::v-deep .custom-time-picker {
  /* display: inline; */
 margin-top: 10px;
 width: 12px;

}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 160px;
}

::v-deep .custom-time-picker .el-input {
  width: 120px; /* 之前设置的 20px 可能过小，这里调整为 120px 示例 */
  height: 30px;
  /* margin-top: 3px; */
}

::v-deep .custom-time-picker .el-input__inner {
  font-size: 16px;
  line-height: 30px; /* 与输入框高度一致，保证垂直居中 */
}

::v-deep .custom-time-picker .el-time-panel {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 120px;
  height: 300px;
}
::v-deep  .el-input__inner{
  background:transparent;
}
  </style>
  